<template>
  <div class="body-box" style="position:relative">
    <window-title title="成绩操作"></window-title>
    <el-form :inline="true" size="mini" style="margin-top:10px;">
      <el-form-item label="成绩查询">
        <el-switch
          v-model="match_show "
          active-color="#8a70c6"
          inactive-color="#e1e1e1"
          @change="changeMatchShow()"
        ></el-switch>
      </el-form-item>
      <el-form-item label="查询链接">
        <el-button
          class="com-link"
          type="text"
          size="small"
          v-clipboard:copy="copy_url"
          v-clipboard:success="copySuccess"
          v-clipboard:error="copyError"
        >
          复制查询链接
          <i class="el-icon-document-copy" style="margin-left:5px;"></i>
        </el-button>
      </el-form-item>
    </el-form>
    <!-- <div style="position:absolute;right:20px;top:30px;z-index:9">
      <span>是否公示：</span>
      <el-switch
      v-model="match_show "
      active-color="#8a70c6"
      inactive-color="#e1e1e1"
      @change="changeMatchShow()"
    ></el-switch>
    </div>-->
    <window-title title="成绩模板"></window-title>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item,key) in tabs" :key="key" :name="key.toString()" :label="item.name"></el-tab-pane>
    </el-tabs>
    
    <div class="result-model">
      <div class="result-model-item" v-for="(item,key) in model_arr" :key="key">
        <span>{{item.name}}</span>
        <i class="el-icon-close model-close" @click="deleteModel(key)" v-if="key > 5"></i>
      </div>
      <div class="result-model-item" @click="addModel()">
        <i class="el-icon-plus"></i>
      </div>
    </div>
    <div class="result-set">
      <!-- <download-excel
        style="display:inline-block;margin-right:10px;"
        :data="json_data"
        :fields="json_fields"
        name="filename.xlsx"
      >
        <el-button size="mini" type="warning" icon="el-icon-download">下载成绩模板</el-button>
      </download-excel>-->
      <el-button size="mini" type="warning" icon="el-icon-download" @click="daoModel()">下载成绩模板</el-button>
      <el-button size="mini" class="com-btn" icon="el-icon-check" @click="saveModel()">保存成绩模板</el-button>
    </div>
    <window-title title="成绩列表"></window-title>
    <!-- 成绩表格 -->
    <div class="result-table-search">
      <div>
        <el-input
          placeholder="请输入姓名/手机号/参赛号查询"
          size="mini"
          style="width:250px"
          v-model="search_info"
        ></el-input>
      </div>
      <div style="margin-left:10px">
        <el-button icon="el-icon-search" size="mini" class="com-btn" @click="search()">查询</el-button>
        <el-button icon="el-icon-delete" size="mini" type="danger" @click="emptyMatch()">清空成绩</el-button>
      </div>
      <el-button
        size="mini"
        type="warning"
        icon="el-icon-edit"
        style="float:right"
        @click="editCert()"
      >证书编辑</el-button>
    </div>
    <div v-loading="match_load">
      <el-table size="mini" border v-if="!list.data.length">
        <el-table-column type="index"></el-table-column>
        <el-table-column
          v-for="(item_label,key_label) in model_arr"
          :key="key_label"
          :label="item_label.name"
          :prop="item_label.value"
        ></el-table-column>
      </el-table>
      <el-table size="mini" border :data="list.data" v-else>
        <el-table-column type="index"></el-table-column>
        <el-table-column
          v-for="(item_label,key_label) in model_arr"
          :key="key_label"
          :label="item_label.name"
          :prop="'form['+key_label+'].value'"
        ></el-table-column>
        <el-table-column label="操作" width="260px" fixed="right">
          <template slot-scope="item">
            <el-button
              size="mini"
              icon="el-icon-delete"
              @click="deleteMatch(item.row.id,item.row.form[0].value)"
            >删除</el-button>
            <el-button
              size="mini"
              icon="el-icon-edit"
              @click="editCertss(item.row.id,item.row.form)"
            >编辑</el-button>
            <el-button size="mini" icon="el-icon-view" @click="seeCert(item.row.id)">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <div class="page-box-btn">
        <el-button size="mini" icon="el-icon-upload2" type="primary" @click="dao()">导入成绩</el-button>
        <!-- <el-button size="mini" icon="el-icon-delete" type="danger">批量删除</el-button> -->
      </div>
      <el-pagination
        background
        small
        :current-page="list.current_page"
        :page-size="list.per_page"
        layout="total, prev, pager, next, jumper"
        :total="list.total"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <!-- 导入模态框 -->
    <el-dialog
      :visible.sync="dao_model"
      title="导入成绩"
      width="600px"
      :append-to-body="true"
      v-loading="dao_loading"
      :element-loading-text="dao_load_txt"
    >
      <el-upload
        class="upload-demo"
        drag
        action="/admin/Activematch/dao"
        :show-file-list="false"
        multiple
        :on-success="upSuccess"
        :on-error="upError"
        :on-progress="upProcess"
        :data="{active_id:active_id,team_id : tabs[activeName].id}"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传.xlsx或.xls表格文件，单次上传不得超过10000条</div>
      </el-upload>
    </el-dialog>
    <!-- 证书预览 -->
    <el-dialog :visible.sync="cert_model" width="500px" title="证书预览" :append-to-body="true">
      <view-cert :cert_id="cert_id" :active_id="active_id" :team_id="tabs[activeName].id"></view-cert>
    </el-dialog>
    <!-- 编辑模态框 -->
    <el-dialog :visible.sync="edit_model" width="400px" title="编辑成绩" :append-to-body="true">
      <el-form label-position="left" label-width="80px" size="mini">
        <el-form-item v-for="(item,key) in edit_form" :key="key" :label="item.name">
          <el-input v-model="item.value" :placeholder="'请输入'+item.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="com-btn" @click="saveMatch()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";
import editCert from "./edit-cert.vue";
import viewCert from "./result-cert.vue";

export default {
  components: { windowTitle, editCert, viewCert },
  props: { active_id: {} },
  data() {
    return {
      edit_model: false,
      edit_form: [],
      edit_id: 0,
      search_info: "",
      dao_model: false,
      dao_loading: false,
      match_load: false,
      dao_load_txt: "文件上传中",
      tabs: [{ id: 0 }],
      activeName: "0",
      result_name: [
        { name: "user_name", memo: "姓名" },
        { name: "user_no", memo: "参赛号" },
        { name: "mobile", memo: "手机号" },
        { name: "sex", memo: "性别" },
        { name: "result_j", memo: "净成绩" },
        { name: "user_sort", memo: "排名" }
      ],
      model_arr: [],
      select_arr: [],
      json_fields: {},
      json_data: [{}],
      img_url: "",
      list: {
        current_page: 1,
        data: []
      },
      cert_model: false,
      cert_id: 0,
      match_show: -1,
      is_have_model: false,
      copy_url: "https://www.baidu.com"
    };
  },
  mounted() {
    this.getTeams();
    this.matchIsShow();
  },
  methods: {
    //复制链接
    copySuccess(e) {
      this.toast(1, "复制成功：" + e.text);
    },
    copyError() {
      this.toast(0, "复制失败");
    },
    //改变公示
    changeMatchShow() {
      this.ajaxs("activematch/saveMatchShow", {
        data: { active_id: this.active_id, match_show: this.match_show },
        success: res => {
          this.toast(res.code, res.msg);
        }
      });
    },
    //获取公示
    matchIsShow() {
      this.ajaxs("activematch/getMatchShow", {
        data: { active_id: this.active_id },
        success: res => {
          this.match_show = res.msg;
        }
      });
    },
    //导出成绩模板
    daoModel() {
      var str = "";
      for (var i in this.model_arr) {
        if (!str) str = this.model_arr[i].name;
        else str += "," + this.model_arr[i].name;
      }
      window.location.href = "/admin/activematch/daoOut?form=" + str;
    },
    //保存修改
    saveMatch() {
      for (var i in this.edit_form) {
        if (this.edit_form[i].name == "手机号" && !this.edit_form[i].value)
          return this.toast(0, "请输入手机号");
        if (this.edit_form[i].name == "参赛号" && !this.edit_form[i].value)
          return this.toast(0, "请输入参赛号");
      }
      this.ajaxs("Activematch/editMatch", {
        data: { id: this.edit_id, form: this.edit_form },
        success: res => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.edit_model = false;
            this.matchList();
          }
        }
      });
    },
    //编辑证书
    editCertss(id, form) {
      this.edit_model = true;
      this.edit_id = id;
      this.edit_form = JSON.parse(JSON.stringify(form));
    },
    //删除证书
    deleteMatch(id, name) {
      this.$confirm("确定删除【" + name + "】的成绩?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajaxs("Activematch/deleteMatch", {
            data: { id: id },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.matchList();
              }
            }
          });
        })
        .catch(() => {});
    },
    //预览证书
    seeCert(id) {
      this.cert_model = true;
      this.cert_id = id;
    },
    //查询
    search() {
      this.list.current_page = 1;
      this.matchList();
    },
    //清空列表
    emptyMatch() {
      this.$confirm("确定清空所有成绩列表?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajaxs("Activematch/emptyMatch", {
            data: { team_id: this.tabs[this.activeName].id },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.list.current_page = 1;
                this.matchList();
              }
            }
          });
        })
        .catch(() => {});
    },
    //获取赛事成绩列表
    matchList() {
      this.match_load = true;
      this.ajaxs("Activematch/matchList", {
        data: {
          active_id: this.active_id,
          team_id: this.tabs[this.activeName].id,
          page: this.list.current_page,
          search_info: this.search_info
        },
        success: res => {
          this.list = res.msg;
          this.match_load = false;
        }
      });
    },
    //分页
    changePage(e) {
      this.list.current_page = e;
      this.matchList();
    },
    //导入模态框
    dao() {
      if (!this.is_have_model) return this.toast(0, "请先保存成绩模板");
      this.dao_model = true;
    },
    //上传成功
    upSuccess(e) {
      if (e.code == 0) {
        this.dao_loading = false;
        this.dao_model = false;
        return this.toast(e.code, e.msg);
      }
      this.dao_load_txt = "文件上传成功，正在导入数据库";
      this.dao_loading = false;
      this.dao_model = false;
      this.list.current_page = 1;
      this.matchList();
    },
    //上传失败
    upError(e) {
      return this.toast(0, "表格上传失败");
    },
    upProcess(e, file) {
      this.dao_loading = true;
      this.dao_load_txt = "文件上传中";
      if (e.percent == 100) {
        setTimeout(() => {
          this.dao_load_txt = "文件上传成功，正在导入数据库";
        }, 500);
      }
    },
    //保存成绩模板
    saveModel() {
      this.$confirm("是否保存模板，保存后原有的成绩记录将被清空?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajaxs("Activematch/saveModel", {
            data: {
              active_id: this.active_id,
              team_id: this.tabs[this.activeName].id,
              form: this.model_arr
            },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.list.current_page = 1;
                this.matchList();
                this.getMatchHead();
              }
            }
          });
        })
        .catch(() => {});
    },
    //切换组别
    handleClick() {
      this.getMatchHead();
    },
    //获取成绩模板和成绩列表
    getMatchHead() {
      this.ajaxs("activematch/getMatchHead", {
        data: { team_id: this.tabs[this.activeName].id },
        success: res => {
          this.model_arr = [];
          console.log(res);
          if (res.code) {
            this.is_have_model = true;
            this.model_arr = res.msg.form;
            this.select_arr = res.msg.select_form;
            this.img_url = res.msg.img_url;
          } else {
            this.is_have_model = false;
            this.img_url = "";
            this.model_arr = [
              {
                name: "姓名",
                value: "",
                fontSize: "12",
                color: "#333",
                dY: "",
                dX: ""
              },
              {
                name: "手机号",
                value: "",
                fontSize: "12",
                color: "#333",
                dY: "",
                dX: ""
              },
              {
                name: "参赛号",
                value: "",
                fontSize: "12",
                color: "#333",
                dY: "",
                dX: ""
              },
              {
                name: "性别",
                value: "",
                fontSize: "12",
                color: "#333",
                dY: "",
                dX: ""
              },
              {
                name: "名次",
                value: "",
                fontSize: "12",
                color: "#333",
                dY: "",
                dX: ""
              },
              {
                name: "净成绩",
                value: "",
                fontSize: "12",
                color: "#333",
                dY: "",
                dX: ""
              }
            ];
            this.select_arr = [];
          }
          this.matchList();
        }
      });
    },
    //获取组别列表
    getTeams() {
      this.ajaxs("active/getTeamInfo", {
        data: { active_id: this.active_id },
        success: res => {
          this.tabs = res.msg;
        }
      });
    },
    //删除模板
    deleteModel(key) {
      this.model_arr.splice(key, 1);
    },
    //添加字段
    addModel() {
      this.$prompt("请输入字段名", "添加字段", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          if (!value) return this.toast(0, "请输入字段名");
          this.model_arr.push({
            name: value,
            value: "",
            fontSize: "12",
            color: "#333",
            dY: "",
            dX: ""
          });
        })
        .catch(() => {});
    },
    //编辑证书
    editCert() {
      let height = document.documentElement.clientHeight;
      this.$layer.iframe({
        content: {
          content: editCert, //传递的组件对象
          parent: this, //当前的vue对象
          data: {
            result_name: this.model_arr,
            team_id: this.tabs[this.activeName].id,
            select_arr: this.select_arr,
            active_id: this.active_id,
            img_cover: this.img_url
          } //props
        },
        area: ["800px", height - 50 + "px"],
        title: "编辑证书"
      });
    }
  },
  watch: {
    tabs() {
      this.getMatchHead();
    },
    model_arr() {
      for (var i in this.model_arr) {
        this.json_fields[this.model_arr[i].name] = this.model_arr[i].name;
        this.json_data[0][this.model_arr[i].name] = "";
      }
    }
  }
};
</script>

<style>
.result-table-search {
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 10px;
}
.result-table-search > div {
  float: left;
}
.result-model {
  overflow: hidden;
}
.result-model-item {
  float: left;
  padding: 3px 10px;
  border: 1px solid #e1e1e1;
  margin-right: 20px;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
.model-close {
  border-radius: 50%;
  background: #8a70c6;
  color: #fff;
  height: 15px;
  width: 15px;
  text-align: center;
  line-height: 15px;
  /* position: absolute; */
  margin-left: 10px;
  font-size: 12px;
}
.result-set {
  margin-top: 20px;
  margin-bottom: 10px;
}
.page-box-btn {
  float: left;
}
</style>